import Taro, { Component } from '@tarojs/taro'
import { View, Text, ScrollView } from '@tarojs/components'

import WeekList from './mod'

import './style.scss'

const week = new Date().getDay()
const day = week === 0 ? 6 : week - 1
const weekNum = ['一', '二', '三', '四', '五', '六', '日']
const weekEng = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']

export default class Week extends Component {
  constructor(props) {
    super(props)
    this.state = {
      today: weekEng[day],
      current: day
    }
  }

  static defaultProps = {
    data: []
  }

  config = {
    navigationBarTitleText: '首页'
  }

  picHttps(pic) {
    return pic.replace('http://', '//').replace('https://', '//')
  }

  getEveryWeek(weekData = []) {
    let data = {}
    let [Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday] = [[], [], [], [], [], [], []]
    weekData.map(item => {
      const { weekday } = item
      if (weekday === 1) {
        Monday.push(item)
      } else if (weekday === 2) {
        Tuesday.push(item)
      } else if (weekday === 3) {
        Wednesday.push(item)
      } else if (weekday === 4) {
        Thursday.push(item)
      } else if (weekday === 5) {
        Friday.push(item)
      } else if (weekday === 6) {
        Saturday.push(item)
      } else if (weekday === 7) {
        Sunday.push(item)
      }
    })

    data.Monday = Monday
    data.Tuesday = Tuesday
    data.Wednesday = Wednesday
    data.Thursday = Thursday
    data.Friday = Friday
    data.Saturday = Saturday
    data.Sunday = Sunday

    return data
  }

  handleClick = index => {
    // console.log(index)
    this.setState({
      current: index
    })
  }

  getTabTitle = () => {
    const { today } = this.state
    return weekEng.map((item, index) => {
      return { title: today === item ? '今天' : `周${weekNum[index]}` }
    })
  }

  render() {
    const { data } = this.props
    const { current } = this.state
    const Anime = this.getEveryWeek(data) || []
    const tabTitle = this.getTabTitle()
    return (
      <View>
        <View className='week-tab'>
          {tabTitle.map((item, index) => (
            <View className={`week-tab__li ${index === current ? 'cur' : ''}`} key={index} onClick={this.handleClick.bind(this, index)}>
              <Text className='week-tab__li-text'>{item.title}</Text>
            </View>
          ))}
        </View>
        <ScrollView>
          <WeekList weekData={Anime[weekEng[current] || []]} />
        </ScrollView>
      </View>
    )
  }
}
